/* ELEMENT RULES */

body {
  background-color: black;
  overflow: hidden;
}

footer * {
  color: white;
  text-decoration: none;
  max-width: 100%;
}

html {
  overflow-x: hidden;
}

hr {
  background-color: white;
  height: 2px;
  width: 300px;
  border: none;
  object-position: center;
  margin: 0;
}

nav {
  position: fixed;
  max-width: 100%;
  z-index: 10;
}

/* END ELEMENT RULES */

/* NOTE These 2 section classes were for the section fading in/out effect. Not currently implemented. */

/* .section-opacity {
  opacity: 0;
  transition: opacity .5s ease-in-out;
}

.section-fade {
  opacity: 1;
} */

.about-me-picture {
  border-radius: 50%;

  @media (hover:hover) and (pointer: fine) {

    :hover {
      transform: scale(1.1);
    }
  }

}

.about-me-section {
  margin: 100px 0 0 0;
  align-items: center;
  padding: clamp(1.56rem, 10vw, 6.25rem) 0 clamp(1.56rem, 10vw, 6.25rem) clamp(1.56rem, 10vw, 6.25rem);
  background-image: url('../imgs/backgrounds/keyboard.jpg');

  @media screen AND (max-width: 991.98px) {
    padding-right: clamp(1.56rem, 10vw, 6.25rem);

  }

  * {
    z-index: 1;
  }
}

.about-me-section-heading {
  z-index: 2;
  background-color: black;
}

.about-me-text {
  padding-right: 100px;
  font-size: clamp(1rem, 2vw, 2rem);
  color: white;
  text-indent: 2em;

  @media screen AND (max-width: 991.98px) {
    padding: clamp(1.56rem, 10vw, 6.25rem) 0 0 0;
  }

  >* {
    margin: 0;
  }
}

.arrow {
  opacity: 1;
  transition: opacity .5s ease-in-out;
}

.arrow-fade {
  opacity: 0;
}

.arrow-left {
  max-width: 100%;
  width: 130px;
  position: absolute;

  bottom: 5vh;
  left: 0;
}

.arrow-right {
  max-width: 100%;
  width: 130px;
  position: absolute;

  bottom: 5vh;
  right: 0;
}

.arrow-wrapper {
  width: 100%;
  z-index: 3;
  height: 100%;
  position: relative;

  animation: arrow-animation 2s ease-in-out infinite;
}

@keyframes arrow-animation {
  0% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(5vh);
  }

  100% {
    transform: translateY(0);
  }
}

.background-img-style {
  position: relative;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 1;
}

.background-img-style::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(128, 128, 128, 0.5);
  pointer-events: none;
  z-index: 0;
}

.btn-transparent {
  border: none;
  background: transparent;
}

.code-img {
  @media screen AND (max-width: 1400.98px) {
    display: none;
  }
}

@keyframes fadeAnimation {
  0% {
    background-position: 100% 0;
  }

  100% {
    background-position: -100% 0;
  }
}

.greeting {
  position: relative;
  color: white;
  font-size: clamp(2rem, 5vw, 4rem);
  z-index: 2;
}

.heading-style {
  padding: 48px 0 48px 0;
  margin: 0;
  color: white;
  font-size: 3rem;
  font-weight: bold;
  text-shadow: .5px .5px .5px white;
}

.hero-section {
  height: 100dvh;
  margin: 0 0 100px 0;
  padding-top: 69px;

  @media screen AND (max-width: 1400.98px) {
    background-image: url("../imgs/backgrounds/code.png");
    background-size: cover;
  }
}

.img-class {
  max-width: 100%;
  width: 300px;
  z-index: 1;
  position: absolute;
  border-radius: 5px;
}

.img-csharp {
  top: 10%;
  left: 100%;
  animation: img-csharp-animation 5s linear infinite;
}

@keyframes img-csharp-animation {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-200vw);
  }
}

.img-dotnet {
  top: 30%;
  left: 100%;
  animation: img-dotnet-animation 5s linear infinite 3s;
}

@keyframes img-dotnet-animation {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-200vw);
  }

  100% {
    transform: translateX(-200vw);
  }
}

.img-html {
  top: 50%;
  left: 100%;
  animation: img-html-animation 6s linear infinite 2s;
}

@keyframes img-html-animation {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-200vw);
  }

  100% {
    transform: translateX(-200vw);
  }
}

.img-js {
  top: 70%;
  left: 100%;
  animation: img-js-animation 8s linear infinite 4s;
}

@keyframes img-js-animation {
  0% {
    transform: translateX(0);
  }

  50% {
    transform: translateX(-200vw);
  }

  100% {
    transform: translateX(-200vw);
  }
}

.link-style * {
  color: white;
  text-decoration: none;
}

.mobile-menu-width {
  @media screen AND (max-width: 1400.98px) {
    width: 100%;
  }
}

.nav-section-width {
  width: 50%;
  justify-content: space-between;

  @media screen AND (max-width: 1400.98px) {
    width: 100%;
    padding-top: 10px;
    flex-direction: column;
  }
}

.navbar-style {
  padding: 16px 100px 16px 100px;
  font-size: 24px;
  color: white;

  @media screen AND (max-width: 1400.98px) {
    padding: 16px 20px 16px 20px;
  }
}

.parallax {
  background-attachment: fixed;
}

.portfolio-img {
  max-width: 100%;
  max-height: 100%;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.portfolio-img-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  height: 400px;
  background: rgba(128, 128, 128, 0.5);
  z-index: 1;
  transform: translateY(100%);
  transition: transform .65s ease-in-out;

  @media (hover:none) and (pointer: coarse) {
    transform: translateY(0);
  }
}

.portfolio-link {
  font-size: 24px;
  text-align: center;
  padding: 0;
  height: 400px;
  z-index: 0;

  @media screen AND (max-width: 991.98px) {
    margin-bottom: 20px;
  }

  * {
    color: white;
    text-decoration: none;
  }
}

.portfolio-link:hover .portfolio-img-overlay {
  transform: translateY(0);
}

/* NOTE This is to create a stacking context for the Portfolio and About Me sections so their elements z-indexes could interact*/
.stacking-context-container {
  z-index: 0;
}

.portfolio-section {
  margin: 100px 0 100px 0;
  overflow: hidden;
}

.portfolio-links {
  font-size: 48px;
  padding-left: 20px;
}

.portfolio-title {
  font-size: 48px;
}

.skill-img {
  max-width: 130px;
  width: 100%;
}

.skill-img-wrapper {
  --translate-x: 0px;
  --translate-y: 0px;

  width: clamp(50px, 8vw, 130px);
  position: absolute;
  height: 85%;
  pointer-events: none;
  left: 46%;
  z-index: -1;
  opacity: 0;
  top: 45%;

  transform: translate(var(--translate-x), var(--translate-y));
  transition: opacity 1s ease-in-out, transform 1s ease-in-out, z-index .1s ease-in, z-index 1.5s ease-out;
}

.skills-section {
  height: 33vh;
  margin: 100px 0 100px 0;
  background-image: url('../imgs/backgrounds/computer_tools.jpg');

  transition: height 1s ease-in-out;
}

.skills-section-grow {
  height: 100vh;

  @media all AND (orientation: portrait) {
    height: 75vh;
  }
}

#skills-toolbox {
  display: inline-block;
  padding: 0;
  border: none;
  background: none;
  z-index: 1;
  transition: transform 1s ease-in-out;
}

.skills-toolbox-grow {
  animation: skills-toolbox-animation 2s ease-in-out infinite;
  transition: opacity .2s ease-in;
}

@keyframes skills-toolbox-animation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.25);
  }

  100% {
    transform: scale(1);
  }
}

#toolbox-img {
  max-width: 100%;
  z-index: 1;
  width: clamp(160px, 20vw, 320px)
}

.smoked-glass {
  background-color: rgba(43, 43, 43, 0.719);
  backdrop-filter: blur(4px);
}

/* NOTE display: contents causes an element's children to appear as if they were the direct children of the element's parent, effectively removing the element itself  from the layout without removing its content. This particular usage is what allowed the social nav-links to still be affected by the justify-content-between (space-between) with the other nav-links to retain the same spacing, even while the social links were in their own wrapper div for structure in the collapse menu. */
.nav-links-wrapper {
  display: contents;
}

@media screen AND (max-width: 1400.98px) {
  .nav-links-wrapper {
    display: flex;
    flex-direction: row;
    gap: 50px;
  }

  .nav-link {
    margin-top: 20px;
  }
}

.text-shadow {
  text-shadow: 1px 2px 4px black;
}

.zoom-item:hover {
  @media (hover:hover) and (pointer: fine) {
    transform: scale(1.5);
    color: white;
  }
}

.zoom-transition {
  @media (hover:hover) and (pointer: fine) {
    transition: transform .3s ease-in-out;
  }
}

/* SKILL LOGO ANIMATIONS */

.html-logo-move {
  opacity: 1;
  z-index: 1;
  --translate-x: 0;
  --translate-y: -40vh;

  @media all AND (orientation: landscape) {
    --translate-x: 0;
    --translate-y: -40vh;
  }

  @media all AND (orientation: portrait) {
    --translate-x: 0;
    --translate-y: -23vh;
  }
}

.css-logo-move {
  opacity: 1;
  z-index: 1;
  --translate-x: -15vw;
  --translate-y: -23vh;

  @media all AND (orientation: landscape) {
    --translate-x: -15vw;
    --translate-y: -28vh;
  }

  @media all AND (orientation: portrait) {
    --translate-x: -24vw;
    --translate-y: -17vh;
  }
}

.bootstrap-logo-move {
  opacity: 1;
  z-index: 1;
  --translate-x: -25vw;
  --translate-y: -4vh;

  @media all AND (orientation: landscape) {
    --translate-x: -25vw;
    --translate-y: -4vh;
  }

  @media all AND (orientation: portrait) {
    --translate-x: -38vw;
    --translate-y: -2vh;
  }
}

.javascript-logo-move {
  opacity: 1;
  z-index: 1;
  --translate-x: 15vw;
  --translate-y: -28vh;

  @media all AND (orientation: landscape) {
    --translate-x: 15vw;
    --translate-y: -28vh;
  }

  @media all AND (orientation: portrait) {
    --translate-x: 24vw;
    --translate-y: -17vh;
  }
}

.vue-logo-move {
  opacity: 1;
  z-index: 1;
  --translate-x: 25vw;
  --translate-y: -4vh;

  @media all AND (orientation: landscape) {
    --translate-x: 25vw;
    --translate-y: -4vh;
  }

  @media all AND (orientation: portrait) {
    --translate-x: 38vw;
    --translate-y: -2vh;
  }
}

.csharp-logo-move {
  opacity: 1;
  z-index: 1;
  --translate-x: -20vw;
  --translate-y: 20vh;

  @media all AND (orientation: landscape) {
    --translate-x: -20vw;
    --translate-y: 20vh;
  }

  @media all AND (orientation: portrait) {
    --translate-x: -30vw;
    --translate-y: 13vh;
  }
}

.mysql-logo-move {
  opacity: 1;
  z-index: 1;
  --translate-x: -7.5vw;
  --translate-y: 38vh;

  @media all AND (orientation: landscape) {
    --translate-x: -7.5vw;
    --translate-y: 38vh;
  }

  @media all AND (orientation: portrait) {
    --translate-x: -10vw;
    --translate-y: 22vh;
  }
}

.mongodb-logo-move {
  opacity: 1;
  z-index: 1;
  --translate-x: 7.5vw;
  --translate-y: 40vh;

  @media all AND (orientation: landscape) {
    --translate-x: 7.5vw;
    --translate-y: 40vh;
  }

  @media all AND (orientation: portrait) {
    --translate-x: 10vw;
    --translate-y: 24vh;
  }
}

.nodejs-logo-move {
  opacity: 1;
  z-index: 1;
  --translate-x: 20vw;
  --translate-y: 20vh;

  @media all AND (orientation: landscape) {
    --translate-x: 20vw;
    --translate-y: 20vh;
  }

  @media all AND (orientation: portrait) {
    --translate-x: 30vw;
    --translate-y: 13vh;
  }
}

/* END SKILL LOGO ANIMATIONS */